﻿<template>
  <div class="home-view">
    <section class="hero">
      <div>
        <h1>薄荷健康，轻松掌控体重</h1>
        <p>
          结合科学营养、训练周期与好习惯养成，用最少的时间搭建可持续的健康方式。
        </p>
        <div class="hero-actions">
          <ElButton type="primary" size="large" @click="goRecipes">浏览食谱</ElButton>
          <ElButton size="large" @click="goGuides">查看指南</ElButton>
        </div>
      </div>
      <ElCard class="hero-card">
        <ElDescriptions title="健康指标" :column="1" border>
          <ElDescriptionsItem label="BMI 指数">
            <ElTag :type="getBMIType(profile.bmi || 0)" size="large">{{ profile.bmi || 0 }}</ElTag>
            <span style="margin-left: 8px;">{{ getBMILabel(profile.bmi || 0) }}</span>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="基础代谢率">
            <strong>{{ profile.bmr || 0 }}</strong> kcal/天
          </ElDescriptionsItem>
        </ElDescriptions>
        <ElDivider />
        <p class="hint">💡 基础代谢率是指在静息状态下身体每天消耗的最低热量。</p>
      </ElCard>
    </section>

    <section class="recipe-spotlight">
      <header>
        <h2>热门食谱</h2>
        <span>根据低 GI、高蛋白等标签精选，满足不同场景的营养需求。</span>
      </header>
      <ElRow :gutter="16">
        <ElCol v-for="recipe in spotlightRecipes" :key="recipe.id" :xs="24" :sm="12" :lg="8">
          <ElCard shadow="hover" class="recipe-card">
            <img :src="recipe.image" :alt="recipe.name" class="recipe-cover" />
            <h3>{{ recipe.name }}</h3>
            <p class="calories">{{ recipe.calories }} kcal</p>
            <ul class="ingredients">
              <li v-for="ingredient in recipe.ingredients" :key="ingredient.name">
                {{ ingredient.name }} · {{ ingredient.amount }}
              </li>
            </ul>
            <ElButton type="primary" link @click="goRecipes">查看全部食谱</ElButton>
          </ElCard>
        </ElCol>
      </ElRow>
    </section>

    <section class="insight-section">
      <header>
        <h2>三大方法论</h2>
        <span>围绕数据、营养、训练三大维度，助你稳步打造可持续的生活方式。</span>
      </header>
      <ElRow :gutter="16">
        <ElCol :xs="24" :md="8">
          <ElCard>
            <h3>数据追踪</h3>
            <p>配合穿戴设备与应用记录，每周自动生成训练强度与恢复报告。</p>
          </ElCard>
        </ElCol>
        <ElCol :xs="24" :md="8">
          <ElCard>
            <h3>营养支持</h3>
            <p>提供低 GI、高蛋白、易准备的菜单，提高饱腹感与口味满意度。</p>
          </ElCard>
        </ElCol>
        <ElCol :xs="24" :md="8">
          <ElCard>
            <h3>习惯养成</h3>
            <p>拆分成可执行的小行动，通过提醒与复盘让改变真正留在生活里。</p>
          </ElCard>
        </ElCol>
      </ElRow>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElButton, ElCard, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElTag, ElDivider } from 'element-plus';
import { useContentStore } from '../stores/content';

const router = useRouter();
const contentStore = useContentStore();

const spotlightRecipes = computed(() => contentStore.recipes.slice(0, 3));
const profile = computed(() => contentStore.userProfile);

// BMI 分类标签
const getBMILabel = (bmi: number) => {
  if (bmi < 18.5) return "偏瘦";
  if (bmi < 24) return "正常";
  if (bmi < 28) return "偏胖";
  return "肥胖";
};

// BMI 标签颜色
const getBMIType = (bmi: number): "success" | "warning" | "danger" => {
  if (bmi < 18.5) return "warning";
  if (bmi < 24) return "success";
  if (bmi < 28) return "warning";
  return "danger";
};

const goRecipes = () => router.push({ name: 'recipes' });
const goGuides = () => router.push({ name: 'guides' });
</script>

<style scoped>
.home-view {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: center;
}

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.hero p {
  color: var(--mint-text-muted);
  margin-bottom: 16px;
}

.hero-card {
  border: none;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(28, 42, 43, 0.1);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.desc-tag {
  margin-left: 8px;
  color: var(--mint-text-muted);
}

.hint {
  color: var(--mint-text-muted);
  margin-top: 12px;
  margin-bottom: 0;
}

.recipe-spotlight header,
.insight-section header {
  margin-bottom: 24px;
}

.recipe-spotlight h2,
.insight-section h2 {
  margin: 0;
  font-size: 1.8rem;
}

.recipe-card h3 {
  margin: 16px 0 8px;
}

.recipe-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

.calories {
  color: var(--mint-primary-dark);
  font-weight: 600;
}

.ingredients {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  color: var(--mint-text-muted);
}

.ingredients li + li {
  margin-top: 6px;
}
</style>
